<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<script type="text/javascript">
	$(document).ready(function(){	
		loadShowTabs1();
		loadShowTabs2();
	});		
	function loadShowTabs1(){
		var html = '';
		var count  = 0;
		if(productShowed != null){
			var compositionTemp = productShowed.compositionCollection[0];
			count = compositionTemp.valueRadio;
			count++;

			html+=''+
			'	<div style ="text-align: center;">'+
			'		<label class="showImage"></label>'+
			'	</div>'+
			'	<div style="color:orange;font-size: 13pt;" >'+
			'		<label>'+productShowed.name+'</label></br>'+
			'	</div>'+
			'	<div style="font-size: 8pt;" >'+
			'		<div style="color:orange;" >'+
			'			<label>'+productShowed.code+' </label></br>'+
			'		</div>'+
			'		<div style="color:green;" >'+
			'			<label><b><a style="color:green;" href="javascript:functionChooseTabs()">'+productShowed.genericName+'</a></b></label></br></br>'+						
			'			<label><b>'+productShowed.generalIndication+'</b></label></br></br>'+
			'				<table class="tabla_decorado" style="width: 80%; ">'+
			'					<thead>'+
			'						<tr>'+
			'							<th width="'+(100/count)+'%" class="th_decoradoRowspan" style="text-align: left;" ><fmt:message key="table.composition"/></th>'+
			'							<th width="'+(100/count)+'%" class="th_decoradoRowspan" >'+compositionTemp.typeComposition.name+'</th>'+
			'						</tr>'+
			'					</thead>'+				
			'					<tbody>';
			for (var i = 0; i < productShowed.compositionCollection.length; i++) {
				var obj = productShowed.compositionCollection[i];
				html+='				<tr class="tr_decorado">'+
				'						<td class="th_decorado" style="text-align: left">'+obj.name+'</td>'+
				'						<td class="th_decorado" style="text-align: center">'+obj.quantity+'</td>'+
				'					</tr>';
			}
			html+='				</tbody>'+				
			'				</table></br>';
			for (var i = 0; i < productShowed.productattributesCollection.length; i++) {
				var obj = productShowed.productattributesCollection[i];
				html+='	<label><b>'+obj.productAttribute.name+'</b></label></br>'+
				'		<label>'+obj.productAttribute.detail+' </label></br></br>';
			}
			html+='		<label><b><fmt:message key="table.presentation"/></b></label></br>'+
			'			<label>'+productShowed.presentation+'</label></br>';
			for (var i = 0; i < productShowed.compositionCollection.length; i++) {
				var obj = productShowed.compositionCollection[i];
				if(obj.checkHealth != ''){
				html+='	<b><label><fmt:message key="table.checkHealth"/> '+obj.checkHealth+'</label></b></br>'+
				'		<label>'+obj.detailCheckHealth+'</label></br>';			
				}						
			}
			'		</div>'+
			'	</div>';
			
		}
		$("#divTabs1").html(html);
	}
	
	function functionChooseTabs(){	
		$("#tabs" ).tabs( { active: 1 } );
	}
	
	function loadShowTabs2(){
		var html = '';
		var count  = 0;
		if(productShowed != null){
			html+=''+
			'	<div style="color:#0000A0;font-size: 13pt;" >'+
			'		<label>'+productShowed.activeSubstance.name+'</label></br>'+
			'	</div>'+			
			'	<div style="color:#0000A0;font-size: 8pt;" >'+
			'		<label> <b>Propiedades</b>: '+productShowed.activeSubstance.properties+' </label></br>'+
			'		<label> <b>Accion Terapeutica</b>: '+productShowed.activeSubstance.therapeuticAction+' </label></br>'+
			'		<div>';
			for (var i = 0; i < productShowed.activeSubstance.attributeCollection.length; i++) {
				var obj = productShowed.activeSubstance.attributeCollection[i];
				html+='	<label> <b>'+obj.name+'</b>: '+obj.detail+' </label></br>';
			}
			html+='	</div>'+
			'	</div>';
			
		}
		$("#divTabs2").html(html);
	}
	
	
	/*
	function functionDialogShowDetailPharmacyProduct(productId,providerId,stockId){
		openDialogModalForm("#dialogShowDetailPharmacyProduct","Detalle",function(){
			loadShowTable(productId,providerId);
		});
	}
	*/
</script>

<div id="tabs">
	<ul>
	    <li><a href="#tabs-1">tab 1</a></li>
	    <li><a href="#tabs-2">tab 2</a></li>
	</ul>
	
	<div id="tabs-1">
	    <div id="divTabs1" style="width: 100%;"></div>
	</div>
	<div id="tabs-2">
	    <div id="divTabs2" style="width: 100%;"></div>
	</div>
</div>